<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border: 1px solid black
        }
        th {background-color:black;color : white}
    </style>
    <title>CDEE form example</title>
    <script type="text/javascript" src="ie6modernizer.js"></script>
    <script type="text/javascript" src="cdee.js">
    </script>

    <script type="text/javascript">

        var person1 = {
            'first name':"Jan",
            'last name': "Jansen",
            'birth date':"10-01-1960",
            'city':"Amsterdam",
            "zip code": "1000AA",
            'country': 'Netherlands'
        };

        var person2 = {
            'first name':"Jan",
            'last name': "Klaassen",
            'birth date':"11-01-1960",
            'city':"Rotterdam",
            "zip code": "1000BB",
            'country': 'Netherlands'
        };


        function updateFrom(){
            person1['first name'] =  document.getElementById("fname").value;
            document.getElementById("cdeeForm1").refresh();
        }

    </script>


</head>


<body>
<H1 data-cdee="cdee.header" data-text="for forms"></H1>
<table><tr><td>
<form id="cdeeForm1" data-cdee="cdee.form" data-model="person1" action="">
</form>
</td><td>&nbsp;</td><td>
    <form id="cdeeForm2" data-cdee="cdee.form" data-model="person2" action="">
    </form>
</td>
</tr>
</table>
<br>
first name:<input id="fname" type="text" value="xxx" onkeyup="updateFrom()">
<span data-cdee="cdee.field" label="name" var="dinges"></span>


</body>
</html>
